<template>
	<view>
		<view v-if="success" class="success">
			<image class="success-image" src='./success.png'></image>
			<view class="success-name">取水成功</view>
			<view class="success-tips">请在机器上按出水按钮进行操作</view>
			<view class="success-btn" @click="goIndex">确定</view>
		</view>
		<view v-else  class="scan">
			<view class="scan-store">{{info.name}}</view>
			<view class="scan-store-number">
				<text>水机编号：No.{{info.id}}</text>
				<!-- <view>机器状态：<text style="color: #42ca4d;">正常</text></view> -->
			</view>
			<view class="scan-store-view">
				<view class="scan-store-view-flex" style="border-bottom: 1rpx solid #D8D8D8;">
					<view>使用水票数量：</view>
					<view style="width: 120rpx;text-align: center;color: #e93323;">1</view>
				</view>
				<view class="scan-store-view-flex">
					<view>出水量：</view>
					<view style="width: 120rpx;text-align: center;color: #e93323;">5L</view>
				</view>
			</view>
			<div class="card">
				<checkbox-group @change="isAllSelect = !isAllSelect">
					<checkbox value="all" checked>我已阅读并同意<text class='checkAll' @click.stop="goTxet(19)">《博士水票核销须知协议》</text></checkbox>
				</checkbox-group>
			</div>
			
			<div class="whiteBg" style="position: fixed;bottom: 60rpx;left: 30rpx;right: 30rpx;display: flex;align-items: center;">
				<div :class="isAllSelect?'':'no'" class="invitation-logo bg_color" @click="goOutWater(info.deviceNumber)" style="margin-right: 40rpx">矿物质水</div>
				<div :class="isAllSelect?'':'no'" class="invitation-logo" style="background: #1ca5e9;" @click="goOutWater(info.deviceNo2)">富氢水</div>
			</div>
		</view>
		<view class="model" v-if="show">
			<image src="https://watertick.oss-cn-hangzhou.aliyuncs.com/quan2.png" class="model-image" mode="widthFix"></image>
			<view class="price" v-if="show2">
				<view class="price-one">{{voucher}}</view>
				<view class="price-two">元</view>
			</view>
			<view class="icon-cha iconfont cha" @click="show=false;show2=false"></view>
		</view>
	</view>
</template>

<script>
	import {
		storeDetail,
	} from "@/api/store";
	import {toLogin} from '@/libs/login.js';
	import {mapGetters} from "vuex";
	import {
		outWater,
		queryOutWaterRs
	} from "@/api/user";
	
	export default {
		data() {
			return {
				isAllSelect: true,
				success: false,
				voucher: 0,
				info: {},
				show: false,
				show2: false,
			};
		},
		computed: mapGetters(['isLogin', 'userInfo', 'uid']),
		onLoad(options) {
			this.getDetail(options)
		},
		onUnload() {
			
		},
		onShow() {
			if (!this.isLogin) {
				toLogin();
			}
		},
		onBackPress(e) {
			
		},
		methods: {
			goTxet(id) {
				uni.navigateTo({
					url: '/pages/news/news_details/index?id='+id
				})
			},
			goIndex() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			goOutWater(id) {
				if (!this.isAllSelect) {
					this.$util.Tips({
						title:  "您还未勾选同意《博士水票核销须知协议》"
					});
					return
				}
				uni.showLoading({
					title: '正在出水中',
				});
				const _this = this
				outWater({
					deviceId: id,
					ticketNum: 1,
				}).then(res => {
					const orderNo = res.data.orderNo
					this.voucher = res.data.voucher || 0
					queryOutWaterRs({
						orderNo,
					}).then(res2 => {
						uni.hideLoading();
						console.log(res2)
						const code = res2.data
						if (code === 0) {
							this.success = true
							this.show = true
							setTimeout(()=>{
								this.show2 = true
							}, 500)
						} else {
							_this.$util.Tips({
								title: '出水异常，请联系店主'
							});
						}
					}).catch(err => {
						uni.hideLoading();
						_this.$util.Tips({
							title: '出水异常，请联系店主'
						});
					});
				})
			},
			getDetail(options) {
				storeDetail({
					id: options.id,
				}).then(res => {
					this.info = res.data || null
					console.log(this.info)
				})
			},
			
		}
	}
</script>
<style scoped lang='scss'>
	.model-image{
		width: 100vw;
	}
	.cha{
		font-size: 80rpx;
		color: #fff;
		text-align: center;
		transform: translate(0,-200%);
	}
	.price {
		position: fixed;
		z-index: 10;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-110%);
		display: flex;
		align-items: baseline;
	}
	.price-one{
		color: #ffdd90;
		font-weight: bold;
		font-size: 150rpx;
	}
	.price-two{
		font-weight: bold;
		color: #ffdd90;
		font-size: 50rpx;
	}
	.model{
		position: fixed;
		background: rgba(0, 0, 0, 0.6);
		top: 0%;
		left: 0%;
		right: 0%;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		z-index: 1;
	}
	.no{
		opacity: 0.5;
	}
	.card{
		box-sizing: border-box;
		margin-top: 50rpx;
		font-size: 24rpx;
	}
	.title {
		font-weight: 500;
		font-family: PingFang SC, PingFang SC;
		font-size: 28rpx;
		color: #333;
		margin: 50rpx 0rpx 25rpx 0rpx;
	}
	.checkAll{
		font-size: 24rpx;
		color: #3A84F0;
	}
	.success{
		display: flex;
		min-height: 100vh;
		background-color: #fff;
		flex-direction: column;
		align-items: center;
		&-image{
			width: 447rpx;
			height: 447rpx;
		}
		&-name{
			font-size: 28rpx;
			color: #000000;
		}
		&-tips{
			font-size: 24rpx;
			color: #666666;
			margin: 15rpx 0 60rpx 0;
		}
		&-btn{
			width: 265rpx;
			height: 80rpx;
			border-radius: 40rpx;
			border: 2rpx solid $theme-color;
			color: $theme-color;
			display: flex;
			align-items: center;
			justify-content: center;
			
		}
	}
	.invitation-logo{
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		height: 86rpx;
		background-color: $theme-color;
		border-radius: 120rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	.scan{
		min-height: 100vh;
		padding: 40rpx 30rpx;
		background: #F5F5F5;
	}
	.scan-store{
		font-size: 36rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}
	.scan-store-number{
		display: flex;
		align-items: center;
		margin-bottom: 50rpx;
		justify-content: space-between;
	}
	.scan-store-view{
		width: 100%;
		height: 202rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 20rpx;
	}
	.scan-store-view-flex{
		display: flex;
		align-items: center;
		height: 100rpx;
		justify-content: space-between;
	}
</style>